<template>
	<view>
		<u-navbar back-text="返回" title="举报投诉" :border-bottom="false" :back-text-style="{color: 'rgba(16,142,233,1)' }"
		 back-icon-color="#108EE9">
		</u-navbar>
		<view class="content">
			<u-form :model="form" ref="uForm" label-width="160" :error-type=" ['toast']" :label-style="{fontSize:'28rpx',color:'rgba(153,153,153,1)'}">
				<u-form-item label="工种:" prop="name" label-position="top">
					<view class="work-status" @click="showReason=true">
						{{ form.reason?form.reason:'请选择' }}
						<image src="../../../static/images/common/right.png" mode=""></image>
					</view>
				</u-form-item>
				<u-form-item label="自我介绍" prop="content" label-position="top" :border-bottom="false">
					<textarea class="textarea" placeholder-class="pleace" placeholder="请输入自我介绍(200以内)" maxlength="200"/>
				</u-form-item>
			</u-form>
			<view class="img-title">
				图片证明<text>（最多6张）</text>
			</view>
			<view class="img-text">
				直观的截图是非常有利的举报证据
			</view>
			<view class="addimg-box">
				<view class="add-box">
					<image src="../../../static/images/login/addcard.png" mode=""></image>
				</view>
			</view>
			<view class="foot-btn">
				提交
			</view>
			<view class="foot-text">
				提交即代表你同意，承担因虚假投诉/举报所造成的一切后果
			</view>
		</view>
		<u-select v-model="showReason" mode="single-column" :list="reasonList" @confirm="selectReason"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showReason: false,
				reasonList: [{
					value: 1,
					label: '散播违法/敏感言论'
				},
				{
					value: 2,
					label: '散播违法/敏感言论'
				},{
					value: 3,
					label: '散播违法/敏感言论'
				}],
				form: {
					reason: ''
				},
				rules: {

				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			selectReason(e) {
				console.log(e)
				this.form.reason = e[0].label
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		width: 100%;
		box-sizing: border-box;

		.reason-title {
			font-size: 28rpx;
			font-weight: 400;
			line-height: 37rpx;
			color: rgba(153, 153, 153, 1);
			opacity: 1;
		}

		.work-status {
			width: 100%;
			display: flex;
			justify-content: space-between;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 43rpx;
			color: rgba(102, 102, 102, 1);
			opacity: 1;

			image {
				width: 14rpx;
				height: 24rpx;
				margin-top: 12rpx;
				margin-left: 24rpx;
			}
		}
		.textarea {
			width: 100%;
			height: 284rpx;
			background: rgba(246, 246, 246, 1);
			border-radius: 10rpx;
			padding: 28rpx 26rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 37rpx;
			opacity: 1;
		}
		.img-title{
			margin-top: 40rpx;
			font-size:28rpx;
			font-weight:400;
			line-height:37rpx;
			color:rgba(153,153,153,1);
			opacity:1;
			text{
				display: inline-block;
				margin-left: 8rpx;
				font-size:22rpx;
				font-weight:400;
				line-height:30rpx;
				color:rgba(153,153,153,1);
				opacity:1;
			}
		}
		.img-text{
			margin-top: 10rpx;
			font-size:26rpx;
			font-weight:600;
			line-height:35rpx;
			color:rgba(102,102,102,1);
			opacity:1;
		}
		.addimg-box{
			margin-top: 30rpx;
			width: 100%;
			display: flex;
			.add-box{
				width: 200rpx;
				height: 200rpx;
				background-color: #fff;
				border: 1rpx dashed rgba(223,223,223,1);
				border-radius: 10rpx;
				padding: 68rpx;
				box-sizing: border-box;
				image{
					width: 64rpx;
					height: 64rpx;
				}
			}
			image{
				margin-right: 10rpx;
			}
		}
		.foot-btn{
			margin-top: 120rpx;
			width: 100%;
			height:90rpx;
			background:linear-gradient(180deg,rgba(211,176,105,1) 0%,rgba(228,205,112,1) 100%);
			opacity:1;
			border-radius:8rpx;
			line-height: 90rpx;
			text-align: center;
			font-size:30rpx;
			font-weight:600;
			color:rgba(255,255,255,1);
		}
		.foot-text{
			margin-top: 16rpx;
			width: 100%;
			text-align: center;
			font-size:22rpx;
			font-weight:600;
			line-height:30rpx;
			color:rgba(255,0,0,1);
			opacity:1;
		}
	}
</style>
